<!-- 合作协议 -->
<template>
  <div>
    <div class="header-box space-btn">
      <span class="header-btn" @click="onEdit">
        <span class="cus-text" pointer><a-icon type="edit" /></span>
        <span class="text">编辑</span>
      </span>
      <span class="header-btn ml-30">
        <span class="cus-text" pointer><a-icon type="copy" /></span>
        <a-popover title="更新日志" trigger="click">
          <template slot="content">
            <JournalInfo />
          </template>
          <span class="text">更新日志</span>
        </a-popover>
      </span>
    </div>
    <div v-if="isEdit" class="btn-box space-btn">
      <a-button type="primary" @click="onConfirm">确定</a-button>
      <a-button @click="onCancel">取消</a-button>
    </div>
    <div class="content-box">
      <a-card title="框架协议" :bordered="false">
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :disabled="!isEdit"
          :multiple="true"
          :file-list="fileList1"
          @change="handleChange">
          <template v-if="isEdit">
            <a-button icon="upload">上传附件</a-button>
            <span class="ml-10" style="color:#101010;">支持xlsx、PDF、PNG、JPG、PPT等格式文件，大小≤5M</span>
          </template>
        </a-upload>
      </a-card>
      <a-card title="廉洁协议" :bordered="false">
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :disabled="!isEdit"
          :multiple="true"
          :file-list="fileList2"
          @change="handleChange">
          <template v-if="isEdit">
            <a-button icon="upload">上传附件</a-button>
            <span class="ml-10" style="color:#101010;">支持xlsx、PDF、PNG、JPG、PPT等格式文件，大小≤5M</span>
          </template>
        </a-upload>
      </a-card>
      <a-card title="保密协议" :bordered="false">
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :disabled="!isEdit"
          :multiple="true"
          :file-list="fileList3"
          @change="handleChange">
          <template v-if="isEdit">
            <a-button icon="upload">上传附件</a-button>
            <span class="ml-10" style="color:#101010;">支持xlsx、PDF、PNG、JPG、PPT等格式文件，大小≤5M</span>
          </template>
        </a-upload>
      </a-card>
    </div>
  </div>
</template>

<script>
import JournalInfo from '@views/supplier-manage/effect/components/JournalInfo.vue';

export default {
  name: 'CooperationAgreement',
  components: {
    JournalInfo
  },
  data() {
    return {
      isEdit: false,
      fileList1: [
        {
          uid: '-1',
          name: '框架协议-V1.0 2024-06-01.xlcx',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        },
      ],
      fileList2: [
        {
          uid: '-1',
          name: '廉洁协议-V1.0 2024-06-01.xlcx',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        },
      ],
      fileList3: [
        {
          uid: '-1',
          name: '保密协议-V1.0 2024-06-01.xlcx',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        }
      ],
    };
  },
  mounted() {
  },
  methods: {
    onEdit() {
      this.isEdit = !this.isEdit;
    },
    onConfirm() {
      this.isEdit = false;
    },
    onCancel() {
      this.isEdit = false;
    },
    handleChange(info) {
      let fileList = [...info.fileList];
      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2);

      // 2. read from response and show file link
      fileList = fileList.map(file => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url;
        }
        return file;
      });
      this.fileList = fileList;
    },
  }
}
</script>

<style lang="less" scoped>
.header-box {
  position: relative;
  z-index: 2;

  height: 40px;
  line-height: 40px;
  border-radius: 8px 8px 0px 0px;
  color: rgba(16, 16, 16, 1);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);

  padding: 0 30px;

  .header-btn {
    cursor: pointer;
    .text {
      margin-left: 5px;
    }
  }
}

.btn-box {
  background-color: rgba(245, 246, 248, 1);
  padding: 10px 24px 2px;
}

.content-box {
  position: relative;
  z-index: 1;
  // margin-top: 10px;
}
</style>